<template>
    <div>
        <h1>余余学生管理</h1>
        <el-table :data="elTableData" border style="width: 60%">
            <el-table-column
                    fixed
                    prop="stuId"
                    label="学号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="stuName"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="stuSex"
                    label="性别"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="stuAge"
                    label="年龄"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="classId"
                    label="班级"
                    width="300">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="delClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
<!--        页码-->
        <el-pagination :current-page='elPage' @current-change=elChangePage :page-size=4 layout="prev, pager, next" :total="tableData.length">
        </el-pagination>
<!--      删除弹出框  -->
            <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <span>是否删除" {{itemStuData.stuName}} "这个学生</span>
                <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao">取 消</el-button>
     <el-button type="primary" @click="queding">确 定</el-button>
        </span>
            </el-dialog>
<!--        修改框-->
        <div class="xiugai">
            <span>学号:</span><el-input v-model="itemStuData.stuId" placeholder="请输入内容"></el-input>
            <span>姓名:</span><el-input v-model="itemStuData.stuName" placeholder="请输入内容"></el-input>
            <span>年龄:</span><el-input v-model="itemStuData.stuAge" placeholder="请输入内容"></el-input>
            <span>班级:</span><el-input v-model="itemStuData.classId" placeholder="请输入内容"></el-input>
            <template>
                <el-radio v-model="itemStuData.stuSex" label="男">男</el-radio>
                <el-radio v-model="itemStuData.stuSex" label="女">女</el-radio>
            </template>
        </div>



    </div>
</template>

<script>
    import * as api from '../utils/api'

    export default {
        name: "xkxStudent",
        data() {
            return {
                tableData: [],
                elPage:1,
                nowPage:1,
                centerDialogVisible: false,
                // isshow:false
                itemStuData:{
                    stuId: '',
                    stuName: '',
                    stuSex: '',
                    stuAge: '',
                    classId:'',
                }
            }
        },
        methods: {
            handleClick(row) {
                console.log(row);
                this.itemStuData=row
            },
            delClick(row){
               this. centerDialogVisible=true
               this.itemStuData=row
            },
            quxiao:function () {
                this. centerDialogVisible=false
            },
            queding:function(){
                this. centerDialogVisible=false
                let id=this.itemStuData.stuId
                console.log(id)
                this.axios({
                    url:api.POST_DELSTUDATA,
                    method: 'post',
                    data:{stuId:id},
                }).then((data)=>{
                    console.log(data)
                     if(data.data.state.code===200){
                         this.tableData=data.data.data
                         alert('删除成功')
                     }else {
                         alert('删除失败')
                     }
                })
            },
            elChangePage(val){
                this.elPage=val
            }
        },
        created() {
           this.axios({
               url:api.GET_STUDATA,
               method: 'get',
               params:{stuid:1},
           }).then((data)=>{
               console.log(data)
               this.tableData=data.data.data
           })
        },
        computed:{
            elTableData() {
                let kaishi = (this.elPage - 1) * 4
                let jieshu = (this.elPage - 1) * 4 + 4
                console.log(this.tableData.slice(kaishi, jieshu))
                return this.tableData.slice(kaishi, jieshu)
            }
        },

    }
</script>

<style scoped lang="less">
    h1{
       margin-left: -38%;
    }
    .xiugai{
       position: absolute;
        right: 200px;
        top: 100px;
        width: 360px;
        height: 350px;
        background-color: #E4F5FD;
       span{
           border: 1px solid red;
           display: inline-block;
           /*line-height: 40px;*/
           width: 60px;
           height: 20px;
           padding: 5px;
       }
    }


</style>




